<template>
  <div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="800px"
      @close="onClose"
      @open="onOpen"
    >
      <el-form :inline="true" :model="tableData" class="demo-form-inline">
        <el-form-item label="对应表或视图">
          <el-input v-model="tableData.tableviewname"></el-input>
        </el-form-item>
        <el-form-item v-for="(item, index) in tableData.detail" :key="`tableDatadetail-${index}`" label-width="40px">
          <el-row>
            <el-col :span="3">
              <el-select v-if="index == 0" v-model="item.conditiontype" prop="conditiontype" placeholder="if">
                <el-option label="if" value="if"></el-option>
              </el-select>
              <el-select v-else v-model="item.conditiontype" prop="conditiontype" placeholder="if">
                <el-option label="if" value="if"></el-option>
                <el-option label="eles if" value="eles if"></el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-input v-model="item.condition" placeholder=""></el-input>
            </el-col>
            <el-col :span="1">
              <span> then </span>
            </el-col>
            <el-col :span="5">
              <el-select v-model="item.region" placeholder="跳转至" @change="Onselect(item, index)">
                <el-option label="跳转至" value="跳转至"></el-option>
                <el-option label="直接生效" value="直接生效"></el-option>
              </el-select>
            </el-col>

            <el-col :span="4">
              <el-input v-model="item.nextlevel" placeholder=""></el-input>
            </el-col>

            <el-col :span="3">
              <el-button type="primary" @click="onAdd">添加条件</el-button>
            </el-col>
            <el-col :span="3">
              <el-button :disabled="index == 0" type="primary" @click="onDel(item, index)">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label-width="40px" label="else">
          <el-select v-model="tableData.region1" placeholder="跳转至" @change="Onfotselect">
            <el-option label="跳转至" value="跳转至"></el-option>
            <el-option label="直接生效" value="直接生效"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="elseLevel">
          <el-input v-model="tableData.elseLevel"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit">保存</el-button>
          <el-button @click="onClose">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { GetNextLevel, SaveNextLevel, DelNextLevel } from '@/api/settings/shenpimoban'
export default {
  props: ['visiblesxspjc', 'RowData'],

  data() {
    return {
      Id: this.RowData,
      tableData: {
        detail: [{ conditiontype: 'if', nextlevel: '' }]
      },
      visible: this.visiblesxspjc,
      title: '下级审批节点设置'
    }
  },
  // 这里用watch方法来监听父组件传过来的值，来实现实时更新
  watch: {
    visiblesxspjc(val) {
      // message即为父组件的值，val参数为值
      this.visible = val // 将父组件的值赋给childrenMessage 子组件的值
    },
    RowData(val) {
      // message即为父组件的值，val参数为值
      this.Id = val // 将父组件的值赋给childrenMessage 子组件的值
    }
  },
  created() {},
  methods: {
    onOpen() {
      this.onSearch()
    },
    // 查询数据
    async onSearch() {
      this.loading = true
      let { content } = await GetNextLevel({ levelid: this.Id.id })

      if (content.detail == null) {
        content = { ...content, detail: [{ conditiontype: 'if', nextlevel: '' }] }
      }
      this.tableData = content
      console.log(this.tableData)
      if (this.tableData.elseLevel == '999') {
        this.tableData.region1 = '直接生效'
      } else {
        this.tableData.region1 = '跳转至'
      }
      this.tableData.detail.forEach((itewm, index) => {
        if (itewm.nextlevel == '999') {
          this.tableData.detail[index].region = '直接生效'
        } else {
          this.tableData.detail[index].region = '跳转至'
        }
      })
      this.loading = false
    },
    Onselect(row, index) {
      if (row.region == '直接生效') {
        this.tableData.detail[index].nextlevel = '999'
      } else {
        this.tableData.detail[index].nextlevel = ''
      }
    },
    Onfotselect() {
      if (this.tableData.region1 == '直接生效') {
        this.tableData.elseLevel = '999'
      } else {
        this.tableData.elseLevel = ''
      }
    },
    onAdd() {
      this.tableData.detail.push({ conditiontype: 'if', nextlevel: '' })
    },
    async onSubmit() {
      const id = this.Id.id
      const data = { ...this.tableData, levelid: id }
      const res = await SaveNextLevel(data)
      this.$message({
        type: 'success',
        message: res.message
      })
    },
    onDel(row, indexs) {
      console.log(row, indexs)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.id) {
            const res = await DelNextLevel({ levelid: row.id })
            this.$message({
              type: 'success',
              message: res.message
            })
            this.onSearch()
          } else {
            this.tableData.detail = this.tableData.detail.filter((item, index) => {
              return index != indexs
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击关闭给父组件传值
    onClose() {
      this.tableData = {
        detail: [{ conditiontype: 'if' }]
      }
      this.$emit('fatherxspjc')
    }
    // 点击对勾给父组件传值
    // onChoosebm(row) {
    //   this.$emit('onChoosexspjc', row)
    //   this.$emit('fatherxspjc')
    // }
  }
}
</script>

<style></style>
